import React, { useState, useEffect, useCallback } from 'react';
import { postLsMealHistoryFindLsMeal, getLsMealHistoryListOverview } from '../../api'
import { enumMealTypeArr, enumMealStateArr } from '../../enum'
import { ImportAndExportListAll } from './style'
import { message, PageHeader, Table, Row, Col, Statistic, Select, Space, Tag } from 'antd';
const { Option } = Select;

const ImportAndExportList = () => {
    const [listData, setListData] = useState([])
    const [paging, setPaging] = useState({
        currentPage: 1,
        size: 10,
        total: 0
    })
    const [tableLoading, setTableLoading] = useState(true)
    const [mealSum, setMealSum] = useState({}); // 获取的统计数据
    const [mealSumType, setMealSumType] = useState('0'); // 获取统计数据的条件
    const mealSumFun = useCallback(
        () => {
            ;(async () => {
                const {code, msg, data} = await getLsMealHistoryListOverview ({condition: mealSumType});
                if(code === '20000') {
                    setMealSum(data);
                }else{
                    message.error(msg);
                }
            })();
        },
        [mealSumType],
    )
    const listFun = useCallback(
        (parames = {
            currentPage: 1,
            size: 10
        }) => {
            setTableLoading(true)
                ; (async () => {
                    const { code, msg, data } = await postLsMealHistoryFindLsMeal(parames)
                    if (code === '20000') {
                        setListData(data.records)
                        setPaging({
                            currentPage: parames.currentPage,
                            size: parames.size,
                            total: data.total
                        })
                        setTableLoading(false)
                    } else {
                        message.error(msg)
                    }
                })()
        },
        [],
    )
    useEffect(() => {
        listFun();
        mealSumFun();
    }, [listFun, mealSumFun])
    //条件
    const handleChange = value => {
        setMealSumType(value)
    }
    //
    //分页
    const pagination = {
        //是否可以改变pagesize//
        showSizeChanger: true,
        //是否可以快速跳转到某页
        showQuickJumper: true,
        //展示一共有多少条数据//
        showTotal: () => `共${paging.total}条`,
        //每页条数
        pageSize: paging.size,
        //当前页数
        current: paging.currentPage,
        //数据总数
        total: paging.total,
        //pageSize 变化的回调
        onShowSizeChange: (current, pageSize) => changePageSize(pageSize, current),
        //页码改变的回调，参数是改变后的页码及每页条数
        onChange: (current) => changePage(current),
    }
    //改变每页条数
    const changePageSize = (pageSizeFun, current) => {
        const parames = {
            currentPage: current,
            size: pageSizeFun
        }
        listFun(parames);
    }
    //改变页数
    const changePage = (current) => {
        const parames = {
            currentPage: current,
            size: paging.size
        }
        listFun(parames);
    }
    const columns = [
        {
            title: '序号',
            render: (text, recode, index) => <span>{index + 1}</span>
        },
        {
            title: '报餐人员',
            dataIndex: 'mainName'
        },
        {
            title: '报餐日期',
            dataIndex: 'mealDate'
        },
        {
            title: '报餐类型',
            dataIndex: 'mealType',
            render: text => <span>{enumMealTypeArr[text]}</span>
        },
        {
            title: '菜品-单价-数量',
            render: (text, recode) => <Space>
                {
                    recode.dishesInfos.map(item => <Tag>{item.dishes}-{item.price}元-{item.amount}</Tag>)
                }
            </Space>
        },
        {
            title: '总金额(元)',
            dataIndex: 'totalMoney'
        },
        {
            title: '是否核销',
            dataIndex: 'state',
            render: text => <span>{enumMealStateArr[text]}</span>
        },
        {
            title: '核销时间',
            dataIndex: 'consumerDate'
        },
        {
            title: '核销人员',
            dataIndex: 'consumerName'
        }
    ];
    return <ImportAndExportListAll>
        <PageHeader
            className="site-page-header"
            title="报餐统计列表"
        />
        <Row gutter={16}>
            <Col span={6}>
                条件：<Select defaultValue="0" style={{ width: 120 }} onChange={handleChange}>
                    <Option value="0">今日</Option>
                    <Option value="1">本周</Option>
                    <Option value="2">本月</Option>
                </Select>
            </Col>
            <Col span={6}>
                <Statistic title="报餐总数" value={mealSum.sum} />
            </Col>
            <Col span={6}>
                <Statistic title="未核销数" value={mealSum.notVerification} />

            </Col>
            <Col span={6}>
                <Statistic title="已核销数" value={mealSum.verification} />
            </Col>
        </Row>
        <Table
            columns={columns}
            dataSource={listData}
            rowKey='id'
            pagination={pagination}
            loading={tableLoading}
        />
    </ImportAndExportListAll>
}

export default ImportAndExportList